<template>
  <div class="box">
    <!-- 头部搜索模块 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClickProcess" :addFun="add" />
    <!-- 中间表格模块 -->
    <BaseTable :data="processTableData" :columns="processableDataColumns" :tableHeight="tableHeight" :pagination="false"
      :loading="loading"></BaseTable>

    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
    <!-- 新增/修改 -->
    <el-drawer :before-close="handleClose" :title="title" :visible.sync="addleixingMod" direction="rtl">
      <el-form :rules="Rules" ref="formRefs" size="small" :model="form" style="padding:10px 20px">
        <el-form-item label="作业过程编号" prop="processCode" :label-width="formLabelWidth">
          <el-input v-model="form.processCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作业过程名称" prop="processName" :label-width="formLabelWidth">
          <el-input v-model="form.processName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作业过程分类" prop="processType" :label-width="formLabelWidth">
          <el-select clearable v-model="form.processType" placeholder="请选择作业过程分类" style="width: 100%">
            <el-option v-for="item in processTypeList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进出港配置" prop="inoutPort" :label-width="formLabelWidth">
          <el-select clearable v-model="form.inoutPort" placeholder="请选择进出港配置" style="width: 100%">
            <el-option v-for="item in inoutPortList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源" prop="source" :label-width="formLabelWidth">
          <el-select clearable v-model="form.source" placeholder="请选择源" style="width: 100%">
            <el-option v-for="item in sourceList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的" prop="destination" :label-width="formLabelWidth">
          <el-select clearable v-model="form.destination" placeholder="请选择目的" style="width: 100%">
            <el-option v-for="item in sourceList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sortNum" :label-width="formLabelWidth">
          <el-input v-model="form.sortNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否安排计划" prop="isPlan" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isPlan">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否新增子票货" prop="isAddTicket" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isAddTicket">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off" type="textarea" maxlength="500" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="addList()">保 存</el-button>
      </div>
    </el-drawer>
    <!-- 列表 -->
    <el-drawer :visible.sync="exlc" direction="rtl" size="80%">
      <div slot="title" class="dialog-title">
        <el-row>
          <span class="dialog-title-text">{{ processName }}</span>
          <el-button style="float:right" icon="el-icon-plus" @click="locationAddModel" size="mini"></el-button>
        </el-row>
      </div>
      <BaseTable :data="storehouseLocation" :columns="storehouseLocationColumns" :tableHeight="tableHeight + 50"
        :pagination="false" :loading="loading"></BaseTable>
      <div class="page">
        <el-pagination background @size-change="handleSizeCha" @current-change="handleCurrentCha"
          :current-page="startpage1" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize1"
          layout="total, sizes, prev, pager, next, jumper" :total="totalNum1"></el-pagination>
      </div>
    </el-drawer>
    <!-- 新增/修改 -->
    <el-drawer :before-close="handleClose" :title="locationtitle" :visible.sync="showLocation" direction="rtl">
      <el-form ref="addHuo" :rules="locationRules" status-icon size="small" :model="locationForm"
        style="padding: 10px 20px">
        <el-form-item prop="processCode" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              作业过程编号
              <el-tooltip popper-class="tip-style" :content="contentData.processCode" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="locationForm.processCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="processName" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              作业过程名称
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.processName" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="locationForm.processName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="inoutYard" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              出入库
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.inoutYard" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select clearable v-model="locationForm.inoutYard" placeholder="请选择出入库" style="width: 100%">
            <el-option v-for="item in inoutYardList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="source" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              源
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.source" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select clearable v-model="locationForm.source" placeholder="请选择源" style="width: 100%">
            <el-option v-for="item in sourceList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="destination" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              目的
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.destination" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select clearable v-model="locationForm.destination" placeholder="请选择目的" style="width: 100%">
            <el-option v-for="item in sourceList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="updatePoint" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              更新场存节点
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.updatePoint" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select clearable v-model="locationForm.updatePoint" placeholder="请选择更新场存节点" style="width: 100%">
            <el-option v-for="item in updatePointList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="sortNum" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              排序号
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.sortNum" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="locationForm.sortNum"></el-input>
        </el-form-item>
        <el-form-item prop="isFront" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              是否有前置环节
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.isFront" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="locationForm.isFront">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="isTally" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              是否作为理货量
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.isTally" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="locationForm.isTally">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="isOutsideTruck" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              是否有港外车辆
              <el-tooltip popper-class="tip-style" class="item" effect="dark" :content="contentData.isOutsideTruck" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="locationForm.isOutsideTruck">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="isWriteOff" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              是否指令核销
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.isWriteOff" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="locationForm.isWriteOff">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="isOperation" :label-width="formLabelWidth">
          <template slot="label">
            <span>
              是否操作量
              <el-tooltip popper-class="tip-style" effect="dark" :content="contentData.isOperation" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="locationForm.isOperation">
            <el-radio v-for="item in List" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="locationForm.remark" autocomplete="off" type="textarea" maxlength="500"
            show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="postList" :loading="locationLoading">{{
          locationLoading?
        '提交中 ...': '保 存'
        }}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import BaseForm from '@/pages/SystemPage/system/component/form.vue'
import headerSearch from './component/headerSearch'
import publicapi from '@/api/public/index.js'
export default {
  name: 'deviceTypeInformation',
  components: {
    BaseForm,
    BaseTable,
    headerSearch,
    options:{
      styleIsolation:'isolated'
    }
  },
  data() {
    return {
      oldValA: {},
      oldValB: {},
      oldValC: {},
      oldValD: {},
      selectObject: [{
        name: '作业过程',
        type: 'input',
        modelName: 'processName'
      }, {
        name: '种类',
        type: 'select',
        modelName: 'processType',
        selectData: this.processTypeList
      }],
      menuFlag: false,
      exlc: false,
      // 列表数据
      processableDataColumns: [
        {
          prop: 'processName',
          label: '作业过程名称'
        },
        {
          prop: 'processType',
          label: '作业过程种类',
          render(h, params) {
            let text = ''
            if (params.row.processType) {
              text = params.row.processType == '1' ? '一般作业过程' : '辅助作业过程'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'sortNum',
          label: '排序号'
        },
        {
          prop: 'isPlan',
          label: '是否安排计划',
          render(h, params) {
            let text = ''
            if (params.row.isPlan) {
              text = params.row.isPlan == 'Y' ? '是' : '否'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'inoutPort',
          label: '进出港配置',
          render(h, params) {
            let text = ''
            if (params.row.inoutPort) {
              text = params.row.inoutPort == '1' ? '进港' : params.row.inoutPort == '2' ? '出港' : params.row.inoutPort == '3' ? '直取' : '其他'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'source',
          label: '源'
        },
        {
          prop: 'destination',
          label: '目的'
        },
        {
          prop: 'isAddTicket',
          label: '是否增加子票货',
          render(h, params) {
            let text = ''
            if (params.row.isAddTicket) {
              text = params.row.isAddTicket == 'Y' ? '是' : '否'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 300,
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.delFlag == '1'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.$index, params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: `<span style='color:#9420A8;display:'><i class='iconfont icon-1-09'></i><span  style='padding-left:5px;'>列表</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleList(params.$index, params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('1', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      processTableData: [],
      // 列表数据
      storehouseLocationColumns: [
        {
          prop: 'processName',
          label: '子过程'
        },
        {
          prop: 'inoutYard',
          label: '出入库',
          render(h, params) {
            let text = ''
            if (params.row.inoutYard) {
              text = params.row.inoutYard == '1' ? '入库' : params.row.isTally == '2' ? '出库' : params.row.isTally == '3' ? '出入库' : '其他'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'source',
          label: '源'
        },
        {
          prop: 'sortNum',
          label: '排序号'
        },
        {
          prop: 'destination',
          label: '目的'
        },
        {
          prop: 'isTally',
          label: '是否作为理货量',
          render(h, params) {
            let text = ''
            if (params.row.isTally) {
              text = params.row.isTally == 'Y' ? '是' : '否'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'isFront',
          label: '是否有前置环节',
          render(h, params) {
            let text = ''
            if (params.row.isFront) {
              text = params.row.isFront == 'Y' ? '是' : '否'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'isOutsideTruck',
          label: '是否港外车辆',
          render(h, params) {
            let text = ''
            if (params.row.isOutsideTruck) {
              text = params.row.isOutsideTruck == 'Y' ? '是' : '否'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          prop: 'isOperation',
          label: '是否操作量',
          render(h, params) {
            let text = ''
            if (params.row.isOperation) {
              text = params.row.isOperation == 'Y' ? '是' : '否'
            }
            return h('span', {
              domProps: {
                innerHTML: text
              }
            })
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.delFlag == '1'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.locationUpdateModel(params.$index, params.row)
                    }
                  }
                }),

                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('2', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      // 货位
      storehouseLocation: [],
      loading: false,
      menuArr: [],
      statusFlag: false,
      // 查询
      paramform: {
        processName: '',
        processType: ''

      },
      // 作业过程信息
      form: {
        parentId: '0',
        processCode: '',
        processName: '',
        processType: '',
        inoutPort: '',
        isPlan: '',
        source: '',
        sortNum:'',
        destination: '',
        isAddTicket: '',
        delFlag: '0',
        remark: ''
      },
      List: [{
        value: 'Y',
        label: '是'
      }, {
        value: 'N',
        label: '否'
      }],
      updatePointList: [
        {
          value: '0',
          label: '不更新'
        }, {
          value: '1',
          label: '更新'
        }
      ],
      inoutYardList: [{
        value: 1,
        label: '入库'
      }, {
        value: 2,
        label: '出库'
      }, {
        value: 3,
        label: '出入库'
      }, {
        value: 4,
        label: '其他'
      }],
      processTypeList: [
        {
          dictValue: 1,
          dictLabel: '一般作业过程'
        }, {
          dictValue: 2,
          dictLabel: '辅助作业过程'
        }
      ],
      inoutPortList: [{
        value: 1,
        label: '进港'
      }, {
        value: 2,
        label: '出港'
      }, {
        value: 3,
        label: '直取'
      }, {
        value: 4,
        label: '其他'
      }],
      sourceList: [],
      startpage: 1,
      startpage1: 1,
      formLabelWidth: '160px', // form的item宽度
      editleixMod: false, // 修改弹出字典标签框
      addleixingMod: false, // 新增字典标签框
      nowData1: {}, // 临时存放操作数据
      nowData: {}, // 临时存放操作数据
      Rules: {
        processCode: [
          {
            required: true,
            message: '请输入作业过程编号',
            trigger: 'blur'
          }
        ],
        processName: [
          {
            required: true,
            message: '请输入作业过程名称',
            trigger: 'blur'
          }
        ],
        processType: [
          {
            required: true,
            message: '请选择作业过程分类',
            trigger: 'blur'
          }
        ],
        inoutPort: [
          {
            required: true,
            message: '请选择进出港配置',
            trigger: 'blur'
          }
        ],
        isPlan: [
          {
            required: true,
            message: '请选择是否安排计划',
            trigger: 'blur'
          }
        ],
        source: [
          {
            required: true,
            message: '请选择源',
            trigger: 'blur'
          }
        ],
        sortNum: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ],
        destination: [
          {
            required: true,
            message: '请选择目的',
            trigger: 'blur'
          }
        ],
        isAddTicket: [
          {
            required: true,
            message: '请选择是否新增子票货',
            trigger: 'blur'
          }
        ]
      },
      // 子过程验证
      locationRules: {
        processCode: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        processName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        inoutYard: [
          {
            required: true,
            message: '请选择出入库',
            trigger: 'blur'
          }
        ],
        source: [
          {
            required: true,
            message: '请选择源',
            trigger: 'blur'
          }
        ],
        sortNum: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ],
        destination: [
          {
            required: true,
            message: '请选择目的',
            trigger: 'blur'
          }
        ],
        updatePoint: [
          {
            required: true,
            message: '请选择更新场存节点',
            trigger: 'blur'
          }
        ],
        isFront: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        isTally: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        isOutsideTruck: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        isWriteOff: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ]
      },
      showLocation: false,
      locationtitle: '',
      locationLoading: false,
      locationForm: {
        parentId: '',
        processCode: '',
        processName: '',
        inoutYard: '',
        source: '',
        destination: '',
        updatePoint: '',
        sortNum:'',
        isFront: '',
        isTally: '',
        isOutsideTruck: '',
        isWriteOff: '',
        isOperation: '',
        delFlag: '0',
        remark: ''
      },
      // 分页
      currentPage: 1,
      totalNum: 1,
      totalNum1: 1, // 总条数
      pagesize: 10,
      pagesize1: 10,
      dicttype: '',
      title: '',
      processName: '',
      parentId: '',
      contentData: {
        processCode: '作业过程编号',
        processName: '作业过程名称',
        inoutYard: '出入库 ',
        source: '作业公司签票时根据选项值填写过程信息，源为【从】信息',
        destination: '作业公司签票时根据选项值填写过程信息，目的为【到】信息',
        sortNum:'排序号',
        updatePoint: '更新场存节点',
        isFront: '是否有前置环节',
        isTally: '是否作为理货量',
        isOutsideTruck: '是否有港外车辆',
        isWriteOff: '是否指令核销',
        isOperation: '是否操作量',
      }
    }
  },
  async activated() {
    this.getYUANData()
  },
  computed: {
    tableHeight() {
      return this.$store.state.tableHeight
    },
    itableHeight() {
      return this.$store.state.tableHeight + 50
    }
  },
  methods: {
    // 字典查询
    async getYUANData() {
      const res = await publicapi.getDictData('YUAN')
      this.sourceList = res.data.data.YUAN
      this.selectObject[1].selectData = this.processTypeList;
    },
    regionChange(val) {
      if (val) {
        this.form.regionName = this.regionList.filter(item => item.dictValue == val)[0].dictLabel
      }
    },
    handleClose(done) {
      if (this.addleixingMod) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
            this.$nextTick(() => {
              if (this.$refs.formRefs !== undefined) {
                this.$refs.formRefs.resetFields()
              }
            })
          })
          .catch(_ => { })
      }
      if (this.showLocation) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => { })
      }
    },
    // 新增列表弹出框
    async add() {
      this.loading = false
      if (!this.addleixingMod) {
        this.addleixingMod = true
      }
      this.title = '作业过程新增'
      this.form = this.$options.data().form;
    },
    // 修改列表弹出
    async handleEdit(index, row) {
      this.loading = false
      if (!this.addleixingMod) {
        this.addleixingMod = true
      }
      this.title = '作业过程修改'
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/process/queryall?startpage=1&pagesize=10&id=${row.id}`
      )
      if (res.data.success) {
        this.nowData = res.data.data.pages[0]
        this.form.id = this.nowData.id
        this.form.processCode = this.nowData.processCode
        this.form.processName = this.nowData.processName
        this.form.processType = this.nowData.processType
        this.form.sortNum = this.nowData.sortNum
        this.form.inoutPort = this.nowData.inoutPort
        this.form.isPlan = this.nowData.isPlan
        this.form.source = this.nowData.source
        this.form.destination = this.nowData.destination
        this.form.isAddTicket = this.nowData.isAddTicket
        this.form.remark = this.nowData.remark
      }
    },
    // 保存新增/修改信息
    addList() {
      if (this.title == '作业过程新增') {
        this.$refs['formRefs'].validate(async valid => {
          if (valid) {
            const res = await this.$http.post(
              `/${this.$ServiceName}/api/external/process/insert`,
              this.form
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.addleixingMod) {
                  this.addleixingMod = false
                }
                this.getData()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('新增失败！')
          } else {
            return false
          }
        })
      } else {
        // 修改
        this.$refs['formRefs'].validate(async valid => {
          if (valid) {
            const res = await this.$http.put(
              `/${this.$ServiceName}/api/external/process/update`,
              this.form
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.addleixingMod) {
                  this.addleixingMod = false
                }
                this.getData()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('获取数据失败！')
          } else {
            return
          }
        })
      }
    },
    // 删除信息
    async subDelete(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/process/deletebyid?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getData()
    },
    // 删除信息
    async subDelete1(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/process/deletebyidzi?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getStorehouseLocation()
    },
    // 删除提示
    async handleDelete(flag, id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => { })
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      if (flag == '1') {
        this.subDelete(id)
      }
      if (flag == '2') {
        this.subDelete1(id)
      }
    },

    // 查询数据
    async getData() {
      this.loading = true
      if (this.pagesize === 0) {
        this.startpage = 1
      }
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/process/queryall?startpage=${this.startpage}&pagesize=${this.pagesize}&processName=${this.paramform.processName}&processType=${this.paramform.processType}`
      )
      if (res.status == 200) {
        this.loading = false
        if (res.data.success) {
          this.processTableData = res.data.data.pages
          this.processTableData.map(item => {
            item.source = this.sourceList.filter(msg => msg.dictValue == item.source)[0].dictLabel
            item.destination = this.sourceList.filter(msg => msg.dictValue == item.destination)[0].dictLabel
          })
          // 分页
          this.startpage = res.data.data.pageNum // 当前页
          this.totalNum = parseInt(res.data.data.totalNum) // 总数量
          this.pagesize = res.data.data.pageSize //
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },
    clickSearchSon() {
      this.startpage1 = 1
      this.getListData()
    },
    // 获取信息
    async getStorehouseLocation() {
      this.loading = true
      if (this.pagesize === 0) {
        this.startpage = 1
      }
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/process/querybyid?startpage=${this.startpage1}&pagesize=${this.pagesize1}&id=${this.parentId}`
      )
      if (res.status == 200) {
        this.loading = false
        if (res.data.success) {
          this.storehouseLocation = res.data.data.pages
          this.storehouseLocation.map(item => {
            item.source = this.sourceList.filter(msg => msg.dictValue == item.source)[0].dictLabel
            item.destination = this.sourceList.filter(msg => msg.dictValue == item.destination)[0].dictLabel
          })
          // 分页
          this.startpage1 = res.data.data.pageNum // 当前页
          this.totalNum1 = parseInt(res.data.data.totalNum) // 总数量
          this.pagesize1 = res.data.data.pageSize //
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },
    // 列表按钮
    handleList(index, row) {
      this.processName = ''
      this.parentId = ''
      if (!this.exlc) {
        this.exlc = true
      }
      this.parentId = row.id
      this.processName = row.processName
      this.startpage1 = 1
      this.getStorehouseLocation()
    },
    // 保存
    postList() {
      this.locationForm.parentId = ''
      this.locationForm.parentId = this.parentId
      if (this.locationtitle == '子作业新增') {
        this.$refs['addHuo'].validate(async valid => {
          if (valid) {
            const res = await this.$http.post(
              `/${this.$ServiceName}/api/external/process/insertzi`,
              this.locationForm
            )
            if (res.data.code == '0000') {
              if (res.data.success) {
                if (this.showLocation) {
                  this.showLocation = false
                }
                this.getStorehouseLocation()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('新增失败！')
          } else {
            return false
          }
        })
      } else {
        this.$refs['addHuo'].validate(async valid => {
          if (valid) {
            const res = await this.$http.put(
              `/${this.$ServiceName}/api/external/process/updatezi`,
              this.locationForm
            )
            if (res.status === 200) {
              if (res.data.success) {
                if (this.showLocation) {
                  this.showLocation = false
                }
                this.getStorehouseLocation()
                return this.$message.success(res.data.msg)
              }
              return this.$message.warning(res.data.msg)
            }
            this.$message.error('修改失败！')
          } else {
            return false
          }
        })
      }
    },
    // 新增弹出框
    locationAddModel() {
      this.showLocation = true
      this.locationtitle = '子作业新增'
      this.locationForm = this.$options.data().locationForm;
    },
    // 修改弹出框
    async locationUpdateModel(index, row) {
      this.loading = false
      if (!this.showLocation) {
        this.showLocation = true
      }
      this.locationtitle = '子作业修改'
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/process/querybyidzi?id=${row.id}`
      )
      if (res.data.success) {
        this.nowData1 = res.data.data
        this.locationForm.id = this.nowData1.id
        this.locationForm.parentId = this.nowData1.parentId
        this.locationForm.processCode = this.nowData1.processCode
        this.locationForm.processName = this.nowData1.processName
        this.locationForm.inoutYard = this.nowData1.inoutYard
        this.locationForm.sortNum = this.nowData1.sortNum
        this.locationForm.source = this.nowData1.source
        this.locationForm.destination = this.nowData1.destination
        this.locationForm.updatePoint = this.nowData1.updatePoint
        this.locationForm.isFront = this.nowData1.isFront
        this.locationForm.isTally = this.nowData1.isTally
        this.locationForm.isOutsideTruck = this.nowData1.isOutsideTruck
        this.locationForm.isWriteOff = this.nowData1.isWriteOff
        this.locationForm.remark = this.nowData1.remark
      }
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.pagesize = val
      this.getData()
    },
    // 当前页
    handleCurrentChange(val) {
      this.startpage = val
      this.getData()
    },
    // 每页显示的条数
    handleSizeCha(val) {
      this.pagesize1 = val
      this.getStorehouseLocation()
    },
    // 当前页
    handleCurrentCha(val) {
      this.startpage1 = val
      this.getStorehouseLocation()
    },
    // 清除当前页
    clearCurrentPage() {
      this.startpage = 1
    },
    // 搜索货位
    searchClickHw() {
      this.startpage1 = 1
      this.getStorehouseLocation()
    },
    searchData() {
      this.startpage = 1
      this.getData()
    },
    searchClickProcess(searchData) {
      this.startpage = 1
      this.paramform = Object.assign(this.paramform, searchData);
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  max-height: none !important;
}

.selectBox {
  justify-content: space-between;
  display: flex;
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;
  height: 50px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding: 0 1rem;
}

.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th>.cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

.right /deep/ .el-button--mini {
  padding: 7px 6px;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-button+.el-button {
  margin-left: 3px;
}

.asa {
  display: inline;
  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 6px;
  }
}

.excelBox /deep/ .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}

/deep/ .el-form-item--mini.el-form-item {
  line-height: 28px;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}
/deep/.el-drawer__body {
    margin-bottom: 30px;
}
</style>
